<!DOCTYPE html>
<head>
<meta charset="UTF-8">
 <title></title>
</head>

<body>
<canvas id="canvas" width="400px" height="400px" style="border: 1px solid black;"></canvas>
</body>

</html>
<script>
	 var canvas = document.getElementById("canvas");
	 var ctx = canvas.getContext("2d");

	 var dx = 200;
	 var dy = 200;

	 var s = 70;
	 ctx.beginPath();
	 ctx.fillStyle = "rgba(255,0,0,0.5)";

	 var x = Math.sin(0);
	 var y = Math.cos(0);

	 var d = Math.PI / 3;

	 for (var i = 0; i < 6; i++) {
	 var x = Math.sin(i * d);
	 var y = Math.cos(i * d);
	 ctx.lineTo(dx + x * s, dy + y * s);
	 }
	 ctx.closePath();
	 ctx.fill();
</script>